<template>
  <div class="layout-container" v-loading.fullscreen.lock="loading">
    <el-form v-model="formData" label-position="top">
      <el-row :gutter="20">
        <el-col :span="16">
          <el-card>
            <el-row :gutter="20">
              <el-col :span="24">
                <el-form-item label="Type" label-position="right" label-width="80px">
                  <el-radio-group v-model="index">
                    <el-radio-button
                      @click="changePic('Embedding')"
                      label="Embedding"
                      value="Embedding"
                    />
                    <el-radio-button
                      @click="changePic('Distribution')"
                      label="Distribution"
                      value="Distribution"
                    />
                    <el-radio-button
                      @click="changePic('Significance')"
                      label="Significance"
                      value="Significance"
                    />
                    <el-radio-button
                      @click="changePic('Heatmap')"
                      label="Heatmap"
                      value="Heatmap"
                    />
                    <el-radio-button
                      @click="changePic('Metadata')"
                      label="Metadata"
                      value="Metadata"
                      :readonly="true"
                    />
                    <el-radio-button
                      @click="changePic('DataTable')"
                      label="DataTable"
                      value="DataTable"
                    />
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="Gene" label-position="right" label-width="80px">
                  <div class="flex">
                    <div class="flex-1 mr-20">
                      <el-input-tag
                        :max="max"
                        v-model="formData.gene"
                        trigger="Space"
                        autocomplete="off"
                        placeholder="Enter Space To Split"
                      ></el-input-tag>
                    </div>
                    <el-button type="primary" @click="submitSearch">Search</el-button>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>

          <el-card class="mt-20">
            <div style="position: relative; height: 500px; margin-bottom: 100px" v-show="index == 'Embedding'">
              <div style="display: flex;margin-bottom:20px;">
                <span style="margin-left: 60px">散点图</span>
                <el-radio-group
                  v-if="subArr.length > 0"
                  v-model="embeddingIndex"
                  style="margin-left: 20px"
                >
                  <el-radio-button
                    size="small"
                    @click="changeEmbedding(index)"
                    :key="index"
                    v-for="(item, index) in subArr"
                    :label="item"
                    :value="index"
                  />
                </el-radio-group>
              </div>

              <ConnectChart
                style="z-index: 999; height: 600px; width: 700px;border-top:1px solid #ddd"
                ref="ConnectChartRef"
                :graphDataList="graphDataList"
              />
          
              <div style="bottom:-150px;width: 100%; position: absolute; border-bottom:1px solid #ddd;"><br/></div>
            </div>
           
            <div
              v-show="index == 'Embedding'"
              style="
                left: 7%;
               
                color: black !important;
                z-index: 999;
                position: absolute;
              "
            >
              <div style=" margin-top:90px; justify-content:space-between; text-align: center; display: flex; flex-wrap: wrap; width: 600px">
                <div
                  @click="changeType(item, index)"
                  v-for="(item, index) in processedJson.sub_list"
                  style="font-size:12px; display: flex; align-items: center; width: 200px;"
                >
                  
                    <div class="cell" :style="{ background: item.color }"></div>
                    <div>{{ item.value }}</div>
                  
                </div>
              </div>
            </div>
            <div><br/></div>
            <div style="position: relative; margin-top: 350px;" v-show="index == 'Embedding'">
              <UMAPChart ref="UMAPChartRef" style="  width: 700px" :graphDataList="graphDataList" />
              <!-- <div style="position: absolute;left:10px;top:50%;transform: rotate(270deg);font-size:12px ">UMAP1</div>
              <div style="bottom:30px;width: 100%;left:30%; position: absolute;font-size:12px ">UMAP2</div> -->
              <div style="position: absolute; z-index: 999;bottom: 10px;width: 700px; border-bottom:1px solid #ddd;"></div>
            </div>
            <div style="height: 800px" v-show="index == 'Distribution'">
              小提琴图
              <DistributionChart
                style="height: 800"
                :graphDataList="graphDataList"
                ref="DistributionChartRef"
              />
            </div>
            <div :style="{ 'margin-top': '50px' }" v-show="index == 'Heatmap'">
              热力关系图

              <SignificanceChart
                style="height: 500px; margin-bottom: 20px"
                ref="SignificanceChartRef"
                :graphDataList="graphDataList"
              />
            </div>
            <div style="margin-top: 50px" v-show="index == 'Significance'">
              表格
              <HeatmapChart ref="HeatmapChartRef" :graphDataList="graphDataList" />
            </div>
            <div v-show="index == 'Metadata'">
              柱状堆叠
              <div style="text-align: center; position: relative; right: -280px">
                <el-select @change="submitSearch" style="width: 100px" v-model="type">
                  <el-option value="tissue">tissue</el-option>
                  <el-option value="stage">stage</el-option>
                </el-select>
              </div>
              <Bar ref="metaTableRef" :graphDataList="graphDataList" />
            </div>
            <div style="{'height: height', 'margin-top: 50px'}" v-show="index == 'DataTable'">
              表格
              <TableChart ref="tableRef" @sendData="handleChildData" />
            </div>
          </el-card>
        </el-col>

        <el-col :span="8">
          <el-card title="Load data">
            <el-form-item>
              <el-radio-group v-model="filterType">
                <el-radio value="all_cell" border>All cell</el-radio>
                <el-radio value="major_cell_type" border>Major cell type</el-radio>
              </el-radio-group>
            </el-form-item>
            <template v-if="filterType === 'all_cell'">
              <el-form-item label="Major Cell Type">
                <SelectAll
                  @change="change2"
                  v-model="formData.major_all"
                  :options="searchOptions.major_all.options"
                />
              </el-form-item>
              <!-- {{ searchOptions.sub_all.options }} -->
             
              <el-form-item label="Subcluster">
                <SelectAll
                  @change="change3"
                  v-model="formData.sub_ids"
                  :options="searchOptions.sub_all.options"
                />
              </el-form-item>
            </template>
            <template v-if="filterType === 'major_cell_type'">
              <el-form-item label="Major Cell Type">
                <CascaderOne
                  @changeSelect="changeSelect"
                  :multiple="false"
                  v-model="formData.major_all"
                  :options="majorCellType"
                />
              </el-form-item>
               
              <el-form-item label="Subcluster">
                <CascaderOne
                  @change2="change5"
                  @change="change4"
                  v-model="formData.sub_ids"
                  :options="subCluster"
                />
              </el-form-item>
            </template>
            <el-form-item label="Tissue">
              <SelectAll v-model="formData.tissue" :options="searchOptions.name.options" />
            </el-form-item>

            <el-form-item label="Stage">
              <SelectAll v-model="formData.stage" :options="searchOptions.stage.options" />
            </el-form-item>
          </el-card>
        </el-col>
      </el-row>
    </el-form>

    <!-- <script type="text/javascript" id="clstr_globe" src="//clustrmaps.com/globe.js?d=DTmSlW8d_Ls2eQp3ZJTR2L3keoigACWADucqZ_ml0WM"></script> -->
  </div>
</template>

<script setup lang="ts">
import { nextTick, onMounted, reactive, ref, watch, onUnmounted } from 'vue'
import { type CheckboxValueType, ElMessage } from 'element-plus'
import CascaderOne from '@/components/cascader-one.vue'
import SelectAll from '@/components/select-all.vue'
import ConnectChart from '@/components/charts/ConnectChart.vue'
import SignificanceChart from '@/components/charts/SignificanceChart.vue'
import DistributionChart from '@/components/charts/DistributionChart.vue'
import UMAPChart from '@/components/charts/UMAPChart.vue'
import Bar from '@/components/charts/Bar.vue'
import TableChart from '@/components/charts/TableChart.vue'
import axios from 'axios'
import HeatmapChart from '@/components/charts/HeatmapChart.vue'
import {
  getCovid19,
  getSearchOptions,
  getSearchResult,
  getScatterData,
  getTableData,
  getMetaData,
  getDistributionData,
  getHeatmapData,
  getSignificanceTableData,
  getSubList,
  getNameAndStageList,
} from '@/api'

onMounted(() => {
  // 仅在客户端执行（避免服务端访问 window/document）
  // const script = document.createElement('script');
  // script.src = '//clustrmaps.com/globe.js?d=5n7Jf6DZqOABl68QkKU1ExdgsmxUm1S-wpG7yAcO0wI';
  // document.getElementById("").appendChild(script);
})

const embeddingType = ref(-1)
const filterType = ref('all_cell')

const loading = ref(false)
const svg = `
        <path class="path" d="
          M 30 15
          L 28 17
          M 25.61 25.61
          A 15 15, 0, 0, 1, 15 30
          A 15 15, 0, 1, 1, 27.99 7.5
          L 15 15
        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>`

var isLoading = ref(false)
var loadingPercentage = ref(0)

// 组件卸载时移除脚本
//onUnmounted(() => {
//  document.body.removeChild(script);
//});

var formData = reactive({
  type: 'all',
  gene: ['a3galt2'], // 	数据集名
  donor: [], // 供体
  stage: [223, 224], // 阶段
  name: [206], // 名称

  sub_ids: [
    1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26,
    27, 28, 29, 38, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42,
  ],
  major_all: [60, 61, 62, 63], // 主要细胞类型
  sub_all: [
    1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26,
    27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42,
  ], // 主要细胞类型
  tissue: [
    197, 198, 199, 200, 201, 202, 203, 204, 205, 206, 207, 208, 209, 210, 211, 212, 213, 214, 215,
    216, 217, 218, 219, 220, 221, 222,
  ], // 组织
  // cell_names: ['a3galt2', 'gal6', 'b4galt2'],

  // stage: [223], // 阶段
  // name: [206], // 名称
  // major_all: 61, // 主要细胞类型
  // sub_all: [7], // 主要细胞类型
  // tissue: [206], // 组织
  //   cell_names
  // :
  // "a3galt2"
  // major_ids
  // :
  // "60,61,62,63"
  // major_type
  // :
  // "all"
  // name_ids
  // :
  // "197,198,199,200,201,202,203,204,205,206,207,208,209,210,211,212,213,214,215,216,217,218,219,220,221,222"
  // stage_ids
  // :
  // "223,224"
  // sub_ids
  // :
  // "1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42"
  // gene:['a3galt2','gal6','b4galt2'],
  // data.cell_names = 'a3galt2,gal6,b4galt2'
  //   data.stage_ids = 223 + ''
  //   data.name_ids = 206 + ''
  //   data.sub_ids = 7 + ''
  //   data.major_ids = 61 + ''
  // detail_annotation_tmp: [], // 标记温度
  // temp: '', // 标记温度
})
// var colors = ref([{ color: '#0F5433' }, { color: '#0F5433' }])
const change = (e) => {
  formData.type = e
}
async function changeSelect(e) {
  formData.sub_ids = []
  formData.tissue = []
  formData.stage = []
  var major_type = ''

  if (e.type == 'major_tnk') {
    major_type = 'tnk'
  } else if (e.type == 'major_myeloid') {
    major_type = 'myeloid'
  } else if (e.type == 'major_b_plasma') {
    major_type = 'b_plasma'
  } else if (e.type == 'major_progenetior') {
    major_type = 'progenetior'
  }
  formData.type = major_type

  var res = await getSubList({ major_type: major_type, major_ids: e.id })

  subCluster.value[0].children = []
  subCluster.value[1].children = []
  subCluster.value[2].children = []
  subCluster.value[3].children = []
  if (formData.type == 'tnk') {
    subCluster.value[0].children = res
  } else if (formData.type == 'myeloid') {
    subCluster.value[1].children = res
  } else if (formData.type == 'b_plasma') {
    subCluster.value[2].children = res
  } else if (formData.type == 'progenetior') {
    subCluster.value[3].children = res
  }
}
async function change2(e) {
  formData.sub_ids = []
  formData.tissue = []
  formData.stage = []
  // searchOptions.sub_all.options=[];
  var res = await getSubList({ major_type: 'all', major_ids: e.join(',') })
  searchOptions.sub_all.options = res
}

async function change3(e) {
  formData.tissue = []
  formData.stage = []
  // searchOptions.sub_all.options=[];
  var res = await getNameAndStageList({ major_type: 'app', sub_ids: e.join(',') })
  searchOptions.name.options = res.namelist
  searchOptions.stage.options = res.stagelist
}
var major_type = ref('tnk')
async function change5(e) {
  alert(e)
  major_type.value = ''

  if (e == 'tnk') {
    major_type.value = 'tnk'
  } else if (e == 'myeloid') {
    major_type.value = 'myeloid'
  } else if (e == 'plasma') {
    major_type.value = 'b_plasma'
  } else if (e == 'progenetior') {
    major_type.value = 'progenetior'
  }
}
var arr = []
async function change4(e) {
  // alert(e)  Precursor TNK/ILC_C35,Prolif TNK/ILC_C40,T-C1-SELL

  arr = []
  subCluster.value.forEach((item) => {
    if (item.children) {
      item.children.forEach((childItem) => {
        if (e.includes(childItem.value)) {
          arr.push(childItem.id)
        }
      })
    }
  })
  
  formData.tissue = []
  formData.stage = []

  // searchOptions.sub_all.options=[];
  var res = await getNameAndStageList({ major_type: major_type.value, sub_ids: arr.join(',') })
  searchOptions.name.options = res.namelist
  searchOptions.stage.options = res.stagelist
}

const cellList = ref([])
// 所有下拉选择
const searchOptions = reactive({
  major_all: {
    label: 'Major Cell Type',
    options: [],
  },
  sub_all: {
    label: 'Subcluster',
    options: [],
  },
  name: {
    label: 'Tissue',
    options: [],
  },
  stage: {
    label: 'Stage',
    options: [],
  },
  // major_cell_type
  major_tnk: {
    label: 'Major TNK',
    options: [],
  },
  major_myeloid: {
    label: 'Major Myeloid',
    options: [],
  },
  major_b_plasma: {
    label: 'Major B Plasma',
    options: [],
  },
  major_progenetior: {
    label: 'Major Progenetior',
    options: [],
  },
  sub_tnk: {
    label: 'Sub TNK',
    options: [],
  },
  sub_myeloid: {
    label: 'Sub Myeloid',
    options: [],
  },
  sub_b_plasma: {
    label: 'Sub B Plasma',
    options: [],
  },
  sub_progenetior: {
    label: 'Sub Progenetior',
    options: [],
  },
})

const height = ref(800)
const height2 = ref(200)

const handleChildData = (data) => {
  height.value = data + 200
}
// http://38.181.47.77:18822/api/browser/getScatterData?type=all&major_ids=61,196&sub_ids=225,66&tissue_ids=91&name_ids=206&stage_ids=223&cell_names=a3galt2
// const searchData = reactive({
// type:'',
// major_ids:'61,196',
// sub_ids:'225,66',
// tissue_ids:'91',
// name_ids:'206',
// stage_ids:'223',
// cell_names:'a3galt2',
// })
// major_cell_type 下的组合数据
const majorCellType = ref([])
const subCluster = ref([])

// 搜索结果
const searchResult = ref({})
const getOptions = async () => {
  try {
    const data = await getSearchOptions()
    for (const key in searchOptions) {
      if (data[key] != null && data[key] != undefined) {
        // @ts-ignore
        searchOptions[key].options = data[key]
      }
      majorCellType.value = [
        {
          label: 'Major TNK',
          value: 'major_tnk',
          children: searchOptions.major_tnk.options,
        },
        {
          label: 'Major Myeloid',
          value: 'major_myeloid',
          children: searchOptions.major_myeloid.options,
        },
        {
          label: 'Major B Plasma',
          value: 'major_b_plasma',
          children: searchOptions.major_b_plasma.options,
        },
        {
          label: 'Major Progenetior',
          value: 'major_progenetior',
          children: searchOptions.major_progenetior.options,
        },
      ]

      subCluster.value = [
        {
          label: 'Sub TNK',
          value: 'sub_tnk',
          children: searchOptions.sub_tnk.options,
        },
        {
          label: 'Sub Myeloid',
          value: 'sub_myeloid',
          children: searchOptions.sub_myeloid.options,
        },
        {
          label: 'Sub B Plasma',
          value: 'sub_b_plasma',
          children: searchOptions.sub_b_plasma.options,
        },
        {
          label: 'Sub Progenetior',
          value: 'sub_progenetior',
          children: searchOptions.sub_progenetior.options,
        },
      ]
    }
  } catch (e) {
    // ElMessage.error('Failed to get options')
  }
}
const index = ref('Embedding')
const changePic = (type) => {
  index.value = type
}
const type = ref('tissue')
const graphDataList = ref([])
var subArr = ref([])
const tableDataList = ref([])
var metaDataList = ref([])
const lastRequestTime = ref(0)
// 用于存储处理后的 JSON 数据
const processedJson = ref({})
function changeType(item) {
  UMAPChartRef.value.changeData(item)
}
// 生成随机颜色的函数
const getRandomColor = () => {
  const letters = '0123456789ABCDEF'
  let color = '#'
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)]
  }
  return color
}
const submitSearch = async () => {
  const now = Date.now()
  if (now - lastRequestTime.value < 500) {
    ElMessage.warning('请求过于频繁，请稍后再试')
    return
  }
  lastRequestTime.value = now

  loading.value = true

  // ElMessage.success('数据加载中')
  try {
    var data = {
      major_type: '',
      // tissue_ids: '',
      stage_ids: '',
      major_ids: '',
      sub_ids: '',
      // name_ids: '',
      cell_names: '',
      name_ids: '',
    }
    // if (formData.gene.length == 0) {
    //   ElMessage.error('请填写Gene')
    //   return
    // }

    // if (
    //   formData.stage.length == 0 &&
    //   (formData.major_all == '' || formData.major_all == undefined) &&
    //   formData.sub_all.length == 0 &&
    //   formData.tissue.length == 0
    // ) {
    //   ElMessage.error('请填写Major Cell Type,Subcluster,Tissue,Stage中的一个')
    //   return
    // }
    // if (index.value == '') {
    //   ElMessage.error('请选择type')
    //   return
    // }
    if (formData.major_all == undefined) {
      formData.major_all = ''
    }

    data.major_type = formData.type

    data.stage_ids = formData.stage.join(',')

    data.major_ids = formData.major_all + ''

    data.sub_ids = formData.sub_ids.join(',')

    data.name_ids = formData.tissue.join(',')

    data.cell_names = formData.gene.join(',')
    //     type: all
    // stage_ids: 223
    // major_ids: 61
    // sub_ids: 7
    // cell_names: a3galt2,gal6,b4galt2
    // name_ids: 206
    // name_ids: 206
    // alert(formData.name)
    // data.name_ids = formData.name.join(',')
    // data.cell_names = formData.gene.join(',')
    // major type=all&major ids=61&tissue ids=91&name ids=206&stage ids=223&cel1 names=a3galt2%2cga16%2cb4galt2&type=stage
    // data.cell_names = 'a3galt2,b4galt2'
    // data.stage_ids = 223 + ''
    // data.name_ids = 206 + ''
    // data.sub_ids = 7 + ''
    // data.major_ids = 61 + ''
    // a3galt2%2cga16%2cb4galt2
    // major type=all&major ids=61&tissue ids=91&name ids=206&stage ids=223&cel1 names=a3galt2%2cga16%2cb4galt2&type=stage
    // data.cell_names = 'a3galt2,azin2'
    // data.stage_ids = 223 + ''
    // data.name_ids = 206 + ''
    // data.sub_ids = '7,17,24'
    // data.major_ids = 61 + ''
    // data.type = 'tissue'


  

    arr = []
   
    
    var value = Object.values(formData.sub_ids);
    console.log(formData.sub_ids,'1')
    console.log(value,'2')

    subCluster.value.forEach((item) => {
      if (item.children) {
        item.children.forEach((childItem) => {
          if (value.includes(childItem.value)) {
            arr.push(childItem.id)
          }
        })
      }
    })
    if(arr.length==0){
      data.sub_ids = formData.sub_ids.join(',')
    }else{
      data.sub_ids=arr.join(",");
    }  
   

    graphDataList.value = []

    if (index.value == 'Embedding') {
      const scatterData = await getScatterData(data)

      // 为 sub_list 中的每个值生成一个随机颜色
      const colorMap = {}

      if (!scatterData) {
        ConnectChartRef.value.childMethod(null)
        UMAPChartRef.value.childMethod(null)
        return
      }
      scatterData.sub_list.forEach((item) => {
        colorMap[item] = getRandomColor()
      })

      // 处理 cell_list 中的 sub 数组
      const newCellList = {}
      for (const [key, value] of Object.entries(scatterData.cell_list)) {
        newCellList[key] = {
          sub2: value.sub.map(
            (subItem) =>
              // value: subItem,
              colorMap[subItem]
          ),
          color: value.color.map((subItem) => {
            return subItem
          }),
          // sub: value.sub.map((subItem) => (
          //   // value: subItem,
          //    colorMap[subItem]
          // )),
          x: value.x,
          y: value.y,
        }
      }

      // 处理 sub_list
      const newSubList = scatterData.sub_list.map((item) => ({
        value: item,
        color: colorMap[item],
      }))

      // 组合处理后的数据
      processedJson.value = {
        cell_list: newCellList,
        sub_list: newSubList,
      }

      subArr.value = Object.keys(scatterData.cell_list)
      graphDataList.value = Object.values(processedJson.value.cell_list)

      nextTick(async () => {
        ConnectChartRef.value.childMethod(graphDataList.value)
        UMAPChartRef.value.childMethod(graphDataList.value)
      })
    } else if (index.value == 'DataTable') {
      data.page_size = 10
      data.page = 1
      tableRef.value.childMethod(data)
    } else if (index.value == 'Metadata') {
      data.type = type.value
      var res = await getMetaData(data)

      graphDataList.value = res
      nextTick(async () => {
        metaTableRef.value.childMethod(data)
      })
    } else if (index.value == 'Distribution') {
      var res = await getDistributionData(data)

      graphDataList.value = res
      nextTick(async () => {
        DistributionChartRef.value.childMethod()
      })
    } else if (index.value == 'Significance') {
      var res = await getSignificanceTableData(data)
      graphDataList.value = res
      nextTick(async () => {
        HeatmapChartRef.value.childMethod(data)
      })
    } else if (index.value == 'Heatmap') {
      var res = await getHeatmapData(data)

      graphDataList.value = res
      height2.value = 250
      var height = 250
      if (res && res.y.length >= 2) {
        height = res.y.length * height2.value * 0.5
      }

      height2.value = height
      nextTick(async () => {
        SignificanceChartRef.value.childMethod()
      })
    }
    // ElMessage.success('数据获取成功')
    loading.value = false
  } catch (e) {
    console.log(e)
    loading.value = false
    // ElMessage.error('Failed to get options')
  } finally {
    loading.value = false
    loadingPercentage.value = 0
  }
}
submitSearch()

function getRandomHexColor() {
  const letters = '0123456789ABCDEF'
  let color = '#'
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)]
  }
  return color
}

var ConnectChartRef = ref(null)
var UMAPChartRef = ref(null)
var tableRef = ref(null)
var metaTableRef = ref(null)
var embeddingIndex = ref(-1)
var DistributionChartRef = ref(null)
var SignificanceChartRef = ref(null)
var HeatmapChartRef = ref(null)

async function changeEmbedding(index) {
  // await submitSearch()
  nextTick(async () => {
    ConnectChartRef.value.changeData(index)

    embeddingIndex.value = index
  })
}
onMounted(() => {
  getOptions()
})
var max = ref(10)
watch(index, (newValue, oldValue) => {
  if (index.value == 'Metadata') {
    max.value = 1
    if (formData.gene.length > 1) {
      ElMessage.warning('只允许输入一个基因名称')

      return
    }
  } else {
    max.value = 10
  }
  submitSearch()
})
watch(filterType, (newValue, oldValue) => {
  if (filterType.value == 'all_cell') {
    formData.type = 'all'
  } else {
    formData.type = 'tnk'
  }

  // formData.gene = [] // 	数据集名
  formData.donor = [] // 供体
  formData.stage = [] // 阶段
  formData.name = [] // 名称
  formData.major_all = [] // 主要细胞类型
  formData.sub_all = [] // 主要细胞类型
  formData.sub_ids = []
  formData.tissue = [] // 组织
  formData.detail_annotation_tmp = [] // 标记温度
  formData.temp = '' // 标记温度
})
</script>




<style lang="scss" scoped>
.flex {
  width: 100%;
  display: flex;
  align-items: center;

  .flex-1 {
    flex: 1;
  }
}

.mr-20 {
  margin-right: 20px;
}
.cell {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  // background: red;
  margin-right: 10px;
}
</style>
